import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
import Mynavlink from "../../Mynavlink";
import { Detail } from "./Detail";
const data = [
  {
    id: "01",
    name: "张三",
    age: 18,
  },
  {
    id: "02",
    name: "李四",
    age: 23,
  },
  {
    id: "03",
    name: "王五",
    age: 31,
  },
  {
    id: "04",
    name: "刘能",
    age: 58,
  },
];
export class Childsun extends Component {
  render() {
    return (
      <>
        <ul>
          {data.map((item) => (
            <Mynavlink
              key={item.id}
              to={`/child2/sun2/${item.id}/${item.name}/${item.age}`}
              // to={{
              //   pathName: `/child2/sun2`,
              //   state: { id: item.id, name: item.name, age: item.age },
              // }}
            >
              <button>{item.name}</button>
            </Mynavlink>
          ))}
        </ul>
        <br />
        <Route path="/child2/sun2/:id/:name/:age" component={Detail}></Route>
        <Redirect to="/child2/sun2/01/张三/18" />
        {/* <Route path="/child2/sun2" component={Detail}></Route> */}
      </>
    );
  }
}
